<template>
  <div class="classAndCarousel">
    <div class="container">
      <div class="big-all-sort">
        <div class="all-sort">
          <div class="small-container">
            <div>
              <h2 class="allSort-word">全部分类</h2>
            </div>
            <div class="sort">
              <div class="sort-left">
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-meishi"></i>
                    <span class="item-text-span">美食</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="delicious in data.deliciousFood"
                            :key="delicious.delicious"
                          >
                            <a href="" class="item-category-word">{{
                              delicious
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-meituan"></i>
                    <span class="item-text-span">外卖</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="takeOutFood in data.takeOutFood"
                            :key="takeOutFood.takeOutFood"
                          >
                            <router-link
                              to="/outFood"
                              class="item-category-word"
                              >{{ takeOutFood }}</router-link
                            >
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-jiudian"></i>
                    <span class="item-text-span">酒店</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="hotel in data.hotel"
                            :key="hotel.hotel"
                          >
                            <a href="" class="item-category-word">{{
                              hotel
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-minsu"></i>
                    <span class="item-text-span">民宿</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="BB in data.BB"
                            :key="BB.BB"
                          >
                            <router-link
                              to="/catEyeMovies"
                              class="item-category-word"
                              >{{ BB }}</router-link
                            >
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-zhinengmaoyan"></i>
                    <span class="item-text-span" @click="goMaoYan"
                      >猫眼电影</span
                    >
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="CatMovie in data.CatMovie"
                            :key="CatMovie.CatMovie"
                          >
                            <a href="" class="item-category-word">{{
                              CatMovie
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-dongchegaotie"></i>
                    <span class="item-text-span">机票 / 火车票</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="ticket in data.ticket"
                            :key="ticket.ticket"
                          >
                            <a href="" class="item-category-word">{{
                              ticket
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-maikefeng"></i>
                    <span class="item-text-span">休闲娱乐 / KTV</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="KTV in data.KTV"
                            :key="KTV.KTV"
                          >
                            <a href="" class="item-category-word">{{ KTV }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-shenghuofuwu"></i>
                    <span class="item-text-span">生活服务</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="life in data.life"
                            :key="life.life"
                          >
                            <a href="" class="item-category-word">{{ life }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-nvren"></i>
                    <span class="item-text-span">丽人 / 美发 / 医学美容</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="Hairdressing in data.Hairdressing"
                            :key="Hairdressing.Hairdressing"
                          >
                            <a href="" class="item-category-word">{{
                              Hairdressing
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-zuanshi"></i>
                    <span class="item-text-span">结婚 / 婚纱摄影 / 婚宴</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore" style>
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="marry in data.marry"
                            :key="marry.marry"
                          >
                            <a href="" class="item-category-word">{{
                              marry
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-qinziyou"></i>
                    <span class="item-text-span">亲子 / 儿童乐园 / 幼教</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="Parenting in data.Parenting"
                            :key="Parenting.Parenting"
                          >
                            <a href="" class="item-category-word">{{
                              Parenting
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-gangling"></i>
                    <span class="item-text-span">运动健身 / 健身中心</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="motion in data.motion"
                            :key="motion.motion"
                          >
                            <a href="" class="item-category-word">{{
                              motion
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-tubiao-"></i>
                    <span class="item-text-span">家装 / 建材 / 家居</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="decoration in data.decoration"
                            :key="decoration.decoration"
                          >
                            <a href="" class="item-category-word">{{
                              decoration
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-kaoshi"></i>
                    <span class="item-text-span">学习培训 / 音乐培训</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="train in data.train"
                            :key="train.train"
                          >
                            <a href="" class="item-category-word">{{
                              train
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-yiliaoxiang"></i>
                    <span class="item-text-span">医疗健康 / 宠物 / 爱车</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div
                            class="item-category-unit"
                            v-for="medical in data.medical"
                            :key="medical.medical"
                          >
                            <a href="" class="item-category-word">{{
                              medical
                            }}</a>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
                <div class="item-one">
                  <div class="item-one-text">
                    <i class="iconfont icon-jiubei"></i>
                    <span class="item-text-span">酒吧 / 密室逃脱</span>
                    <i class="iconfont icon-youjiantou"></i>
                  </div>
                  <div class="item-category">
                    <div class="item-category-container">
                      <dl class="item-category-fore">
                        <dt>
                          <div class="item-category--header">
                            <span>美食</span>
                            <div class="item-category--header-right">
                              <a href="" class="item-category--header-word"
                                >更多</a
                              >
                              <i class="iconfont icon-youjiantou"></i>
                            </div>
                          </div>
                        </dt>
                        <div class="item-category-bottom">
                          <div class="bottom-container">
                            <div
                              class="item-category-unit"
                              v-for="bar in data.bar"
                              :key="bar.bar"
                            >
                              <a href="" class="item-category-word">{{
                                bar
                              }}</a>
                            </div>
                          </div>
                        </div>
                      </dl>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="smallCategory">
            <span class="smallCategory-word">美团外卖 </span>
            <span class="smallCategory-word">猫眼电影</span>
            <span class="smallCategory-word"
              ><router-link to="/BBItem">美团酒店</router-link></span
            >
            <span class="smallCategory-word"
              ><router-link to="/B&B">民宿／公寓</router-link></span
            >
            <span class="smallCategory-word">商家入驻</span>
            <span class="smallCategory-word">美团公益</span>
          </div>
        </div>
      </div>
      <Banner></Banner>
    </div>
  </div>
</template>

<script>
export default {
  name: "Sort",
};
</script>

<script setup>
import Banner from "../banner/index.vue";
import { useRouter } from "vue-router";

const Router = useRouter();

const data = {
  deliciousFood: [
    "代金券",
    "甜点",
    "饮品",
    "火锅",
    "自助餐",
    "小吃",
    "快餐",
    "日韩料理",
    "西餐聚餐",
    "宴请",
    "烧烤",
    "烤肉",
    "东北菜",
    "川湘菜",
    "江浙菜",
    "香锅烤鱼",
    "粤港菜",
    "中式烧烤",
    "烤串",
    "西北菜",
    "咖啡酒吧",
    "茶馆",
    "云贵菜",
    "东南亚菜",
    "海鲜",
    "素食",
    "台湾",
    "客家菜",
    "创意菜汤",
    "粥",
    "炖菜",
    "蒙餐",
    "新疆菜",
    "其他美食",
    "京菜",
    "鲁菜",
  ],
  takeOutFood: ["美团外卖"],
  hotel: ["经济型舒适", "三星高档", "四星豪华", "五星"],
  BB: ["复式Loft别墅"],
  CatMovie: [
    "扫黑行动",
    "你好",
    "万里归途",
    "名侦探柯南",
    "万圣节的新娘",
    "我的遗憾和你有关",
    "明日战记",
    "我的外星朋友",
    "平凡英雄",
    "还是觉得你最好",
    "陪你在全世界长大",
  ],

  ticket: ["国内机票", "火车票"],
  KTV: [
    "足疗按摩洗浴",
    "汗蒸",
    "酒吧",
    "密室逃脱",
    "轰趴馆",
    "茶馆",
    "私人影院",
    "DIY手工坊",
    "采摘",
    "农家乐",
    "网吧",
    "网咖",
    "游乐",
    "游艺VR",
    "桌面游戏",
    "真人CS",
    "棋牌室",
    "其他玩乐",
  ],
  life: [
    "衣物",
    "皮具洗护",
    "家政搬家",
    "运输",
    "送水",
    "充值缴费",
    "服饰",
    "鞋包",
    "养护开锁",
    "换锁",
    "居家维修",
    "管道疏通",
    "家电维修",
    "清洗电脑",
    "维修手机",
    "维修",
    "证件照",
    "肖像摄影",
    "照片冲印",
    "图文",
    "文印商务服务",
    "法律",
    "服务文化",
    "传媒机构",
    "成人用品",
    "情趣用品",
  ],
  Hairdressing: [
    "美发",
    "美甲",
    "美睫",
    "美容",
    "美体",
    "医学美容",
    "瑜伽",
    "舞蹈",
    "瘦身纤体",
    "韩式定妆",
    "祛痘",
    "纹身",
    "化妆品",
    "养发",
  ],
  marry: [
    "婚纱摄影",
    "旅拍",
    "个性写真",
    "婚宴",
    "婚庆公司",
    "婚纱礼服",
    "西服定制",
    "婚戒",
    "首饰",
    "婚车",
    "租赁司仪",
    "主持彩妆",
    "造型婚礼",
    "跟拍婚礼",
    "小礼品",
    "更多婚礼服务",
  ],
  Parenting: [
    "早教中心",
    "少儿英语",
    "智力开发托班",
    "幼儿园",
    "幼儿教育",
    "其他幼儿教育",
  ],
  motion: [
    "健身中心",
    "武术场馆",
    "游泳馆",
    "羽毛球馆",
    "溜冰场",
    "射箭馆",
    "篮球场",
    "网球馆",
    "台球馆",
    "乒乓球",
    "足球场",
    "高尔夫场",
    "保龄球馆",
    "体育场馆",
    "马术场",
    "壁球馆",
    "更多运动",
  ],
  decoration: [
    "地板",
    "瓷砖",
    "石材",
    "橱柜",
    "灯饰照明",
    "厨卫洁具",
    "油漆涂料",
    "集成",
    "吊顶墙纸",
    "墙艺",
    "门窗",
    "木材板材",
    "家用五金",
    "电工电料",
    "楼梯",
    "管材管件",
  ],
  train: ["钢琴", "吉他", "小提琴", "古筝", "架子鼓", "声乐", "其他音乐培训"],
  medical: ["医院", "齿科", "口腔", "体检中心", "药店", "中医", "其他健康服务"],
  bar: [
    "KTV",
    "酒吧",
    "密室逃脱",
    "游乐游艺",
    "网吧网咖",
    "私人影院",
    "DIY手工坊",
    "桌面游戏",
    "采摘",
    "农家乐",
    "棋牌室",
    "轰趴馆",
    "真人CSVR",
    "其他玩乐",
  ],
};
const goMaoYan = () => {
  Router.push({
    path: "/maoyanmovie",
  });
};
</script>

<style scoped>
* {
  margin: 0 auto;
}
.classAndCarousel {
  width: 100%;
  height: 480px;
}
.big-all-sort {
  display: flex;
  justify-content: center;
}
.container {
  width: 1190px;
  position: relative;
}
/*
.all-sort {
  display: flex;
  justify-content: center;
  align-content: center;
}
.smallCategory {
  display: flex;
}*/
.smallCategory {
  width: 680px;
  position: absolute;
  top: -35px;
  left: 273px;
  display: flex;
  justify-content: space-between;
}
.smallCategory-word {
  font-size: 17px;
  font-weight: 550;
}
.small-container .sort {
  margin-top: 10px;
}
.allSort-word {
  font-size: 18px;
}
.small-container {
  width: 213px;
  height: 475px;
  border: 1px solid #e5e5e5;
  position: absolute;
  z-index: 3;
  left: 0px;
  top: -45px;
  padding: 7px;
  background-color: #ffffff;
}

.item-one {
  margin: 1.5px 0;
}

.item-one-text:hover + .item-category {
  display: flex;
}
.bottom-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 20px;
}
.item-category:hover {
  display: flex;
  justify-content: center;
}
.allSort-word {
  font-size: 18px;
  margin-left: 20px;
  padding: 2px 0;
}
.item-one-text {
  width: 230px;
  padding: 3.8px 8px;
  border: 0;
  font-size: 14px;
}
.sort-left {
  margin: 10px;
}
.item-text-span {
  margin-left: 10px;
  font-size: 13px;
  color: #646464;
}

.icon-youjiantou {
  color: #bfbfbf;
  position: absolute;
  right: 7px;
}

.icon-meishi {
  color: orange;
}
.icon-meituan {
  color: #ffb500;
}
.icon-jiudian {
  color: #9b5e3e;
}
.icon-minsu {
  color: #ffb500;
}
.icon-zhinengmaoyan {
  color: #ff3d00;
}
.icon-dongchegaotie {
  color: #03a9f4;
}
.icon-maikefeng {
  color: #00bf96;
}
.icon-shenghuofuwu {
  color: #00bf96;
}
.iconfont icon-nvren {
  color: #ff4081;
}
.icon-zuanshi {
  color: #ff4081;
}
.icon-qinziyou {
  color: #ff4081;
}
.icon-gangling {
  color: #03a9f4;
}
.icon-tubiao- {
  color: #00bf96;
}
.icon-kaoshi {
  color: #00bfa4;
}
.icon-yiliaoxiang {
  color: #03a9f4;
}
.icon-jiubei {
  color: #00bf96;
}
.item-category {
  width: 400px;
  height: 425px;
  position: absolute;
  left: 228px;
  bottom: 0px;
  background-color: #ffffff;
  padding: 0 10px;
  display: none;
}
.item-category--header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 370px;
  border-bottom: 1px solid #9999a6;
  padding: 20px 0;
  position: relative;
}
.item-category--header span {
  font-size: 17px;
  font-weight: 530;
  position: absolute;
  left: 10px;
}
.item-category--header-word {
  color: #9999a6;
  font-size: 12px;
}
.item-category--header-right {
  position: absolute;
  right: 8px;
}
.item-category--header-right i {
  position: absolute;
  right: -10px;
  top: 1px;
  font-size: 12px;
}
.item-category-container dd {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.item-category-word {
  color: #9999a6;
  font-size: 12px;
}

.item-category-fore .item-category-bottom {
  width: 415px;
  display: flex;
  flex-wrap: wrap;
  margin: 9px 0 0 0;
  text-align: left;
  position: absolute;
}
.item-category-unit {
  width: 100px;
  padding-top: 6px;
}
</style>
